<template>
	<view class="goods_detail_container">
		<swiper class="swiper" circular autoplay indicator-dots>
			<swiper-item v-for="(pic, index) in goodsInfo.pics" :key="index" @click="handlePreViewPic(index)"><image :src="pic.pics_big_url" /></swiper-item>
		</swiper>
		<!-- 商品信息区域 s -->
		<view class="goods_info_box">
			<view class="goods_info_box__price">{{ goodsInfo.goods_price }}</view>
			<view class="goods_info_box__info">
				<view class="goods_info_box__info__left">{{ goodsInfo.goods_name }}</view>
				<view class="goods_info_box__info__right">
					<uni-icons type="star" color="gory" size="20"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="goods_info_box__yf">快递：免运费</view>
		</view>
		<!-- 商品信息区域 e -->
		<!-- html -->
		<view style="background:#FFF; padding:20rpx;"><rich-text :nodes="goodsInfo.goods_introduce"></rich-text></view>
	</view>
	<view class="goods_nav_container"><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

interface GoodsInfo {
	add_time: string;
	attrs: Attrs[];
	cat_id: number;
	cat_one_id: number;
	cat_three_id: number;
	cat_two_id: number;
	delete_time: null | string;
	goods_big_logo: string;
	goods_cat: string;
	goods_id: number;
	goods_introduce: string;
	goods_name: string;
	goods_number: number;
	goods_price: number;
	goods_small_logo: string;
	goods_state: number;
	goods_weight: number;
	hot_mumber: number;
	is_del: string;
	is_promote: boolean;
	pics: Pics[];
}
interface Attrs {
	add_price: number;
	attr_id: number;
	attr_name: string;
	attr_sel: string;
	attr_vals: string;
	attr_value: string;
	attr_write: 'manual';
	goods_id: number;
}
interface Pics {
	goods_id: number;
	pics_big: string;
	pics_big_url: string;
	pics_id: number;
	pics_mid: string;
	pics_mid_url: string;
	pics_sma: string;
	pics_sma_url: string;
}

const pageData = reactive({
	goodsInfo: {} as GoodsInfo,
	options: [
		{
			icon: 'shop',
			text: '店铺',
			info: 2,
			infoBackgroundColor: '#007aff',
			infoColor: 'red'
		},
		{
			icon: 'cart',
			text: '购物车',
			info: 2
		}
	],
	buttonGroup: [
		{
			text: '加入购物车',
			backgroundColor: '#ff0000',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: '#ffa200',
			color: '#fff'
		}
	]
});
const { goodsInfo, options, buttonGroup } = toRefs(pageData);
onLoad(res => {
	initGoodsInfo(res.goods_id);
});

async function initGoodsInfo(goods_id: string) {
	const {
		data: { meta, message }
	} = await uni.$http.get('api/public/v1/goods/detail', { goods_id });
	if (meta.status !== 200) return uni.$showMsg();
	message.goods_introduce = message.goods_introduce.replace(/<img /g, '<img style="display:block" ').replace(/webp/g, 'png');
	goodsInfo.value = message;
}
const handlePreViewPic = (index: number) => {
	uni.previewImage({
		current: index,
		urls: goodsInfo.value.pics.map(item => item.pics_big),
		indicator: 'number'
	});
	index;
};
function onClick(e) {
	console.log(e);
}
function buttonClick(e) {
	console.log(e);
}
</script>

<style lang="scss">
page {
	background-color: white;
}
.goods_detail_container {
	padding-bottom: 50px;
}
.swiper {
	height: 750rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.goods_info_box {
	padding: 10px;
	padding-right: 0;
	.goods_info_box__price {
		color: #c00000;
		font-size: 18px;
		margin: 10px 0;
	}
	.goods_info_box__info {
		display: flex;
		.goods_info_box__info__left {
			padding-right: 10px;
		}
		.goods_info_box__info__right {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: gray;
			width: 120px;
			border-left: 1px solid gray;
		}
	}
	.goods_info_box__yf {
		font-size: 12px;
		margin: 10px 0;
		color: gray;
	}
}
.goods_nav_container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>
